import './styles.css'
import { Form, Input, Button, Card, Flex, message} from 'antd'
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'
import { useState } from 'react'
import axios from 'axios'
import logo from '@/assets/logo.png'
import { useNavigate } from 'react-router-dom'

function Login() {

    // 设定密码是否可见
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [passwordVisible, setPasswordVisible] = useState(false);

    //实现跳转
    const navigate = useNavigate();

    const onFinish = async (values) => {
        const {username, password} = values;
        console.log(values);
        if(!username) {
            message.error("请输入正确的用户名！");
            return;
        }
        if(!password) {
            message.error("请输入正确的密码！");
            return;
        }

        // 前端登录post请求发送
        try {
            const response = await axios.post('/login', { username, password });
            console.log(response.data);
            if (response.data.status === 200) {
                message.success('登录成功');
                navigate('/');
            } else {
                message.error('登录失败，请检查用户名和密码');
            }
        } catch (error) {
            message.error('登录请求失败，请稍后重试');
        }
    }

    // 自定义密码复杂度校验函数
    const isPasswordComplex = (password) => {
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/;
        if (password.length>=8 && password.length<=16 && !regex.test(password)) {
            return Promise.reject('密码复杂度过低（必须包含大小字母及数字，8~16位）');
        }
        return Promise.resolve();
    };

    return (
        <div className='login'>
            <Card className='login-container'>
                <img className='login-logo' src={logo} alt='' style={{ display:'block', margin:'0 auto 20px'}} />
                {/* 登录表单 */}
                <Form form={form} onFinish={onFinish}>
                    <Form.Item 
                        name="username" 
                        rules={[
                            { required: true, message: '用户名不能为空'},
                            { min: 3, message: '用户名至少3个字符'}
                        ]}>
                        <Input size='large' placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item 
                        name="password"
                        rules={[
                            { required: true, message: '密码不能为空'},
                            { min: 8, message: '密码至少8位'},
                            { max: 16, message: '密码不得超过16位'},
                            { validator: (_,value) => isPasswordComplex(value)}
                        ]}>
                        <Input.Password
                         size='large' 
                         placeholder='请输入密码'
                         iconRender = { visible => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)} />
                    </Form.Item>
                    <Form.Item>
                        <Flex justify='space-between' align='center'>
                            <Button type='primary' htmlType='submit' size='large'>
                                登录
                            </Button>
                            <Button onClick={() => navigate('/register')} size='large'>
                                注册
                            </Button>
                        </Flex>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
}

export default Login;